import React,{useState} from 'react';
import {Form,Input,Button,message} from 'antd';
import {UserOutlined,LockOutlined,PhoneOutlined} from '@ant-design/icons'
import "./index.css";
import axios from 'axios';

const Register=(props)=>{

    const [code,setCode] = useState('')

    const onFinish=(status)=>{
        axios({
            method:"post",
            url:'/api/api/v1/auth/account',
            data:{
                phone:status.phone,
                password:status.password,
                code:status.code
            },
            headers:{
                'Content-Type':'application/json;charset=utf-8'
            }
        }).then((res)=>{
            let data = res.data;
            setCode(data.code)
            if(data.hasOwnProperty('wording')){
                message.error(data.wording);
            }
            if(data.hasOwnProperty('id')){
                message.success("注册成功，现在进入登录界面");
                props.history.push('/login')
            }
            
        })
    }

    const onFinishFailed=(status)=>{
        console.log(status);
    }

    return(
        <div className="Register_container">
        <div className="Register_container_center">
        <div className="Register_container_logocontainer">
            <img src="https://album.contest.mrs4s.moe/static/images/Logo.png" className="Register_logo" alt="Logo"/>
            <p>智能云相册</p>
        </div>

        <Form size="large" name="register" onFinish={onFinish}
        onFinishFailed={onFinishFailed} className="Register_form">
        <Form.Item name="phone" rules={[{required:true,message:"手机号不能为空"},{len:11,message:"手机号码应为11位数字"}]}>
            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="输入您的手机号码"/>
        </Form.Item>

        <Form.Item name="password"  rules={[{required:true,message:'密码不能为空'}]}>
                <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>} placeholder="输入您的密码"/>
            </Form.Item>
    
        <Form.Item name="confirm" dependencies={['password']} hasFeedback rules={[{required:true},({getFieldValue})=>({
            validator(_,value){
                if(!value||getFieldValue('password')===value){
                    return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入密码不一致'))
            }
        })]}>
        <Input.Password prefix={<LockOutlined className="site-form-item-icon"/>} placeholder="再次输入您的密码"/>
        </Form.Item>

        <div className="Register_codecontainer">
            <PhoneOutlined/>验证码为：{code===''?'无':code}
        </div>

        <Form.Item name="code">
            <Input prefix={<PhoneOutlined/>} placeholder="验证码"/>
        </Form.Item>


        <div className="Register_button_container">
        <Form.Item>
            <Button type="primary" htmlType="submit" className="Register_form_button">
                注册
            </Button>
        </Form.Item>
        </div>
        </Form>
        </div>
        </div>
    )
}

export default Register;